<script setup>
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { modifyUserApi, uploadAvatarApi } from '@/api/user'
import defaultAvatar from '@/assets/images/default-avatar.png'
const userStore = useUserStore()
const isEdit = ref(false)

const formData = ref({
  nickname: '',
  position: '',
  phone: ''
})

const edit = () => {
  isEdit.value = true
  formData.value.nickname = userStore.userInfo.nickname
  formData.value.position = userStore.userInfo.position
  formData.value.phone = userStore.userInfo.phone
}

const form = ref(null)
const commit = () => {
  form.value.validate(async (isOk) => {
    if (isOk) {
      await modifyUserApi({
        nickname: formData.value.nickname,
        position: formData.value.position,
        phone: formData.value.phone
      })
      // eslint-disable-next-line no-undef
      ElMessage.success('保存成功')
      await userStore.setUserInfo()
      isEdit.value = false
    }
  })
}

const cancel = () => {
  isEdit.value = false
  form.value.resetFields()
}

const rule = ref({
  nickname: [
    { required: true, message: '请输入用昵称', trigger: 'blur' },
    { min: 2, max: 16, message: '昵称长度为2-16位', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请输入地址', trigger: 'blur' },
    { min: 3, max: 16, message: '地址长度为3-16位', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 3, max: 16, message: '地址长度为3-16位', trigger: 'blur' }
  ]
})

// 文件input
const fileInput = ref(null)
// 选择文件后触发
const uploadImage = async (value) => {
  if (value.target.files[0]) {
    // 封装请求发给后端
    const formData = new FormData()
    formData.append('file', value.target.files[0])
    await uploadAvatarApi(formData)
    // 更新userInfo
    userStore.setUserInfo()
    // eslint-disable-next-line no-undef
    ElMessage.success('保存成功')
  }
}

// 上传头像按钮
const selectFile = () => {
  fileInput.value.click()
}
</script>

<template>
  <div class="main">
    <div class="top">
      <div class="header-desc">
        <span>会员信息</span>
      </div>
      <div class="home-overview">
        <!-- 用户信息 -->
        <div class="user-meta">
          <div class="avatar" v-if="userStore.userInfo">
            <img :src="userStore.userInfo.avatar || defaultAvatar" />
          </div>
          <div class="user-info">
            <h4>{{ userStore.userInfo?.nickname }}</h4>
            <p class="user-id">用户id：{{ userStore.userInfo?.id + '1701' }}</p>
            <input
              ref="fileInput"
              type="file"
              accept="image/*"
              max="5mb"
              style="display: none"
              @change="uploadImage"
            />
            <el-button
              class="grade"
              color="#626aef"
              size="small"
              type="primary"
              round
              @click="selectFile"
              >更换头像</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="header-desc">
        <span>基本信息</span>
      </div>
      <div class="user-info">
        <el-form
          ref="form"
          :model="formData"
          :rules="rule"
          label-position="right"
          label-width="70px"
          hide-required-asterisk
        >
          <el-form-item label="用户ID:">
            <p>{{ userStore.userInfo?.id + '1701' }}</p>
          </el-form-item>
          <el-form-item label="手机号:" prop="phone">
            <p v-if="!isEdit">{{ userStore.userInfo?.phone }}</p>
            <p v-else>
              <el-input v-model="formData.phone" />
            </p>
          </el-form-item>
          <el-form-item label="昵称:" prop="nickname">
            <p v-if="!isEdit">{{ userStore.userInfo?.nickname }}</p>
            <p v-else>
              <el-input v-model="formData.nickname" />
            </p>
          </el-form-item>
          <el-form-item label="地址:" prop="position">
            <p v-if="!isEdit">{{ userStore.userInfo?.position }}</p>
            <p v-else>
              <el-input v-model="formData.position" />
            </p>
          </el-form-item>
          <el-form-item style="margin: 10px 0 0 10px">
            <el-button v-if="!isEdit" size="small" type="primary" @click="edit">
              编辑
            </el-button>
            <template v-else>
              <el-button size="small" type="primary" @click="commit"
                >确定</el-button
              >
              <el-button size="small" @click="cancel">取消</el-button>
            </template>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-desc {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
}
.main {
  background-color: rgb(245, 245, 245);
}
.top {
  background-color: #fff;
  .home-overview {
    height: 132px;
    background: url(@/assets/images/center-bg.png) no-repeat center / cover;
    display: flex;

    .user-meta {
      flex: 1;
      display: flex;
      // align-items: center;
      padding-top: 20px;

      .avatar {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 30px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

        img {
          width: 100%;
          height: 100%;
        }
      }

      h4 {
        font-size: 18px;
        font-weight: normal;
        // color: white;
      }

      .user-info {
        padding-left: 20px;
        .user-id {
          font-size: 13px;
          color: #888;
          margin-top: 6px;
        }
        .grade {
          margin-top: 8px;
          font-weight: 700;
        }
      }
    }

    .item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;

      &:first-child {
        border-right: 1px solid #f4f4f4;
      }

      a {
        color: white;
        font-size: 16px;
        text-align: center;

        .iconfont {
          font-size: 32px;
        }

        p {
          line-height: 32px;
        }
      }
    }
  }
}
.bottom {
  margin-top: 15px;
  background-color: #fff;

  .user-info {
    padding: 35px 70px;

    p {
      padding-left: 15px;
      font-size: 13px;
    }
  }
}
</style>
